<template>
  <div>
    <!-- <basic-page-header @back="goBack"></basic-page-header>
    <el-divider></el-divider> -->
    <div class="pad-lr-15" v-loading="loading">
      <rs-label-row>
        <rs-label-item label="共享方">{{deptDics[form.useDepartment] || form.useDepartment}}</rs-label-item>
        <rs-label-item label="接口名称">{{form.name}}</rs-label-item>
        <rs-label-item label="用途">{{form.description}}</rs-label-item>
        <rs-label-item label="Token"><div style="width: 100%;word-break: break-all;">{{'Bearer ' + form.token}}</div></rs-label-item>
      </rs-label-row>
      <div class="mar-t-15"><el-divider direction="vertical"></el-divider> 入参</div>
      <el-table
        class="mar-t-15"
        border
        :data="inputParams"
        max-height="250"
        tooltip-effect="dark"
        style="width: 100%"
        >
        <el-table-column
          label="字段"
          prop="key">
        </el-table-column>
        <el-table-column
          prop="dataType"
          label="数据类型">
        </el-table-column>
      </el-table>
      <div class="mar-t-15"><el-divider direction="vertical"></el-divider> 返回参数</div>
      <el-table
        class="mar-t-15"
        border
        :data="outputParams"
        max-height="250"
        tooltip-effect="dark"
        style="width: 100%"
        >
        <el-table-column
          label="字段"
          prop="key">
        </el-table-column>
        <el-table-column
          prop="dataType"
          label="数据类型">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import api from '@/api/dataShare/index';
export default {
  data(){
    return {
      loading: false,
      form: {
        useDepartment: '',
        dataSourceType: '',
        dataSourceDb: '',
        dataSourceTable: '',
        name: '',
        token: '',
        description: ''
      },
      inputParams: [],
      outputParams: []
    }
  },
  mounted(){
    if(this.id){
      // this.id = this.$router.currentRoute.params.id;
      this.get();
    }
  },
  props: {
    id: String,
    deptDics: {
      type: Object,
      default: function(){
        return {}
      }
    }
  },
  methods: {
    get(){
      this.loading = true;
      return api.get({
        id: this.id
      }).then(
        res => {
          this.loading = false;
          if(res.data){
            this.form = res.data.data;
            this.inputParams = JSON.parse(this.form.inputParams) || [];
            this.outputParams = JSON.parse(this.form.outputParams) || [];
          }
        }
      )
    },
    goBack(){
      this.$emit('close' , null)
    }
  }
}
</script>